import * as echarts from 'echarts';
import { onGraphHover, generatePoint } from './utils.js';
import { cloneDeep } from 'loadsh';
const categories =  [
    { name: '教务' },
    { name: '德育' },
    { name: '档案' },
    { name: '行政' },
    { name: '后勤' },
    { name: '安监' },
    { name: '教学' }
  ]

const init = () => {
  var chartDom = document.getElementById('root');
  // 处理坐标
  const clientH = chartDom.scrollHeight;
  const clientW = chartDom.scrollWidth;
  // 处理坐标
  const ins = echarts.init(chartDom);
  ins.showLoading();
  fetch('./data.json').then(res => res.json()).then(props => {
    const data = props.map(i => ({
      ...i,
      symbolSize: i.size || 35,
      itemStyle: {
        // color: i.color,
        shadowBlur: 15,           // 阴影模糊度
        shadowColor: '#2e2e2e',
        color: {
          type: 'radial',
          x: 0.3,
          y: 0.3,
          r: 0.8,
          colorStops: [
            {
              offset: 0, color: '#fff' // 0% 处的颜色
            },
            { offset: 0.5, color: i.color },
            { offset: 1, color: '#1a3a70' }
          ],
        },
        opacity: 1
      },
      value: [generatePoint(i).x, generatePoint(i).y]
    }))
    const item = {
      zlevel: 20,
      z: 20,
      animationDuration: 500,
      animationEasing: 'cubicOut',
      coordinateSystem: 'cartesian2d',
      universalTransition: true,
      type: 'graph',
      label: {
        show: true,
        position: 'right',
        formatter: '{b}',
        color: '#fff',
        fontSize: 14,
        fontFamily: 'Microsoft YaHei',
        textBorderColor: 'red',
        // fontWeight: 'bold'
      },
      labelLayout: {
        hideOverlap: false
      },
      scaleLimit: {
        min: 0.4,
        max: 2
      },
      categories,
      data,
      emphasis: {
        disabled: true
      }
    }
    // 处理得到线的坐标
    const linesData = data.reduce((a, c) => {
      if (c.targets) {
        const arr = c.targets.map(i => {
          const target = data.find(j => j.id === i);
          return {
            coords: [c.value, target.value],
            groupId: c.id,
            lineStyle: {
              color: '#ccc',
              width: 1,
              opacity: 0,
              curveness: 0.2
            },
            sourceId: c.id,
            targetId: i,
            color: c.color
          }
        });
        return [...a, ...arr];
      } else return a;
    }, []);
    const lines = {
      type: 'lines',
      coordinateSystem: 'cartesian2d',
      effect: {            // 流动动画效果的配置
        show: false,
        period: 2,         // 动画周期
        trailLength: 0,  // 尾迹长度
        symbol: 'triangle',   // 动画中显示的图形（比如箭头）
        symbolSize: 8,
        loop: true,         // 循环动画
        animation: false,
        roundTrip: false,
      },
      data: linesData,
      zlevel: 10,
      z: 10,
    }
    const opt = {
      light: {
        main: {
          intensity: 1.5        // 增强光照强度
        }
      },
      animation: true,
      grid: {
        left: '0%',
        right: '0%',
        top: '0%',
        bottom: '0%',
      },
      xAxis: {
        type: 'value',
        min: 0,
        max: clientW,
        inverse: false,
        show: false
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: clientH,
        inverse: true,  // 根据容器高度设置
        show: false
      },
      series: [
        item,
        lines
      ]
    };
    const originOptions = cloneDeep(opt);
    ins.on('click', 'series.graph', prop => {
      ins.setOption(originOptions, true);
      setTimeout(() => {
        if (!prop.data || !prop.data.id) return false;
        const options = onGraphHover(prop.data, ins.getOption(), props)
        ins.setOption(options, true);
      })
    });

    chartDom.addEventListener('click', e => {
      e.stopPropagation();
      ins.setOption(originOptions, true);
    })
    // ins.on('mouseout', 'series.graph', data => {
    //   ins.setOption(originOptions, true);
    // })
    ins.setOption(originOptions)
    ins.hideLoading();
  });

  // window.onresize = () => {
  //   ins.resize();
  // }
  window.addEventListener('resize',  () => {
    ins.resize();
  })
}

init();



// var chartDom = document.getElementById('root');
// // const baseWidth = 1920;
// // const baseHeight = 1080;
// // // 处理坐标
// // const clientH = chartDom.scrollHeight;
// // const clientW = chartDom.scrollWidth;
// // const scaleW = clientW / baseWidth;
// // const scaleH = clientH / baseHeight;
// const centerPoints = [925, 360];

// chartDom.onclick = e => {
//   const { x, y } = e;
//   const string = `
//     "x": ${x - centerPoints[0]},
//     "y": ${y - centerPoints[1]},
//   `;
//   console.log(string);
// }